{% extends 'base.html' %}
{% load humanize %}
{% block page-content %}
{% include 'nav_cat_bar.html' %}

<link href="/static/css/plugins/dataTables/dataTables.bootstrap.css" rel="stylesheet">
<link href="/static/css/plugins/dataTables/dataTables.responsive.css" rel="stylesheet">
<link href="/static/css/plugins/dataTables/dataTables.tableTools.min.css" rel="stylesheet">


<script type="text/javascript">
    function new_server(){
        var opendata=new Array();
        var show=document.getElementsByName('ip_list');

        for(var i=0;i<show.length;i++){
            if(show[i].checked==true){
            opendata[i]=show[i].value+'<br>';
            }
        }
        for(var i=0;i<opendata.length;i++){
            if(opendata[i] == "" || typeof(opendata[i]) == "undefined")
            {
                    opendata.splice(i,1);
                    i = i-1;
            }
        }
        document.getElementById("open_list").innerHTML=opendata;
    };

    function del_server(){
        var opendata=new Array();
        var show=document.getElementsByName('ip_list');

        for(var i=0;i<show.length;i++){
            if(show[i].checked==true){
            opendata[i]=show[i].value+'<br>';
            }
        }
        for(var i=0;i<opendata.length;i++){
            if(opendata[i] == "" || typeof(opendata[i]) == "undefined")
            {
                    opendata.splice(i,1);
                    i = i-1;
            }
        }

        document.getElementById("clear_list").innerHTML=opendata;
    }

</script>

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>{% if area %} {{ area }}-已回收主机详细列表{% else %}默认-已回收主机详细列表{% endif %}</h5>
                    <div class="ibox-tools">
                        <a class="collapse-link">
                            <i class="fa fa-chevron-up"></i>
                        </a>
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="fa fa-wrench"></i>
                        </a>
                        <ul class="dropdown-menu dropdown-user">
                            <li><a href="#">未启用 1</a>
                            </li>
                            <li><a href="#">未启用 2</a>
                            </li>
                        </ul>
                        <a class="close-link">
                            <i class="fa fa-times"></i>
                        </a>
                    </div>
                </div>

                <div class="ibox-content">
                    <div class="row">
                            <div class="col-sm-12 m-b-xs">
                                {% for pro in pro_info %}
                                    <a type="button" class="btn btn-primary btn-sm" href="?project={{pro.name}}">{{pro.name}}</a>
                                {% endfor %}
                            </div>
                    </div>
                    {% if info %}
                        <div class="alert alert-success text-center">{{ info }}</div>
                    {% endif %}
                    <div class="table-responsive">
                    <form id="contents_form" name="contents_form">
                    <table class="table table-striped table-bordered table-hover dataTables-example" id="editable" name="editable">
                        <thead>
                            <tr>
                              <th class="text-center">编号</th>
                              <th class="text-center">项目</th>
                              <th class="text-center">地区</th>
                              <th class="text-center">机房</th>
                              <th class="text-center">平台</th>
                              <th class="text-center">系统</th>
                              <th class="text-center">公网IP</th>
                              <th class="text-center">内网IP</th>
                              <th class="text-center">SSH 端口</th>
                              <th class="text-center">用途</th>
                              <th class="text-center">数据库</th>
                              <th class="text-center">回收时间</th>
                              <th class="text-center">备注</th>
                            </tr>
                        </thead>
                        <tbody>
                       {% for num in host_info %}
                            <tr class="gradeX text-center" style="color:red">
                                <td class="text-center" name="p_old_ip" value="{{ num.p_ip }}" data-editable='false'>{{forloop.counter}}.<input name="ip_list" value="{{ num.p_ip }}" type="checkbox" class="i-checks"></td>
                                <td name="project" data-editable='false'>{{num.project.mini_name}}</td>
                                <td name="area" data-editable='false'>{{num.area}}</td>
                                <td name="idc" data-editable='false'>{{num.idc.mini_name}}</td>
                                <td name="platform" >{{num.platform.mini_name}}</td>
                                <td name="os_type" data-editable='false'>{{num.os_type}}</td>
                                <td name="p_ip">{{num.p_ip}}</td>
                                <td name="s_ip">{{num.s_ip}}</td>
                                <td name="port">{{num.port}}</td>
                                <td name="use" data-editable='false'>{% for use in num.use.all %} {{use}}{% endfor %}</td>
                                <td name="db_ip">{{num.db_ip}}</td>
                                <td data-editable='false'>{{num.recover_date|date:"Y-m-d H:i:s"}}</td>
                                <td name="commit">{{num.commit}}</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                    <input id="checkall" type="checkbox" class="i-checks" name="checkall" value="checkall" data-editable='false' onclick="check_all('contents_form')">全选/全不选
                    </form>
                    <br>
                    <input type="button" class="btn btn-info btn-sm"  data-toggle="modal" data-target="#new-server" data-whatever="@mdo" onclick="new_server()" value="上线">
                    <input type="button" class="btn btn-danger btn-sm"  data-toggle="modal" data-target="#clear-server" data-whatever="@mdo" onclick="del_server()" value="清除">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="modal fade" role="dialog" aria-labelledby="gridSystemModalLabel" id="new-server">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel" align="center">恢复服务器</h4>
      </div>
      <div class="modal-body">
        <div class="container-fluid" align="center">
        <p id="open_list"></p>
        </div>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-success" name="switch" value="new" form="contents_form" formmethod="post" formaction="{% url 'host_list' %}">确定</button>
        <button type="button" class="btn btn-info" data-dismiss="modal">关闭</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->


<div class="modal fade" role="dialog" aria-labelledby="gridSystemModalLabel" id="clear-server">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="gridSystemModalLabel" align="center">清除服务器,不可恢复</h4>
      </div>
      <div class="modal-body">
        <div class="container-fluid" align="center">
        <p id="clear_list"></p>
        </div>
      </div>
      <div class="modal-footer">
        <button type="submit" class="btn btn-success" name="switch" value="clear" form="contents_form" formmethod="post" formaction="{% url 'host_list' %}">确定</button>
        <button type="button" class="btn btn-info" data-dismiss="modal">关闭</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script src="/static/js/plugins/dataTables/jquery.dataTables.js"></script>
<script src="/static/js/plugins/dataTables/dataTables.bootstrap.js"></script>
<script src="/static/js/plugins/dataTables/dataTables.responsive.js"></script>
<script src="/static/js/plugins/dataTables/dataTables.tableTools.min.js"></script>


<script type="text/javascript">
    $(document).ready(function(){
        $('#editable').editableTableWidget({editor: $('<textarea>')});
    });


    function alter(form) {
        selectData = GetTable();
        //console.log(selectData[0])
        if (selectData[1] != 0) {
            $.ajax({
                type: "GET",
                url: "{% url 'host_edit' %}",
                data: {"editable": selectData[0], "len_table": selectData[1]},
                success: function (data) {
                    alert("修改成功");
                    window.open("{% url 'host_list' %}?project={{ project }}", "_self");
                error: window.open("{% url 'host_list' %}?project={{ project }}", "_self");
                }
            });
        }
    }



    $(document).ready(function() {
            $('.dataTables-example').dataTable({
                responsive: true,
                "dom": 'T<"clear">lfrtip',
                "iDisplayLength":50,
                "tableTools": {
                    "aButtons":["copy","xls",'print'],
                    "sSwfPath": "/static/js/plugins/dataTables/swf/copy_csv_xls_pdf.swf"
                }

            });
        });


</script>


{%endblock%}
